<template>
  <div class="moneyzong">
    <div class="moneyshang">
      <div class="moneyzuo">
        <div class="moneytu">
          <img
            src="http://localhost:20338/StaticFiles/关羽1.png"
            width="130px"
            height="130px
                    "
          />
        </div>
        <div class="moneyp">
          <h2>订单提交成功！去付款咯～</h2>
          <p>请在<span>30分</span>内完成支付, 超时后将取消订单</p>
          <p>
            收货信息：<span v-for="(item, index) in fanData" :key="index">
              {{ item.AName }}{{ item.Phone }}{{ item.PName }}{{ item.CName
              }}{{ item.TName }}{{ item.Remark }}
            </span>
          </p>
        </div>
      </div>
      <div class="moneyyou">
        <p>应付总额：{{ zong }}</p>
        <p>
          <el-collapse v-model="activeNames" @change="handleChange">
            <el-collapse-item title="订单详情" name="1">
              <table>
                <tr>
                  <td>订单号：</td>
                  <td>{{aa.hao}}</td>
                </tr>
                <tr>
                  <td>收货信息：</td>
                  <td>
                    <p v-for="(item, index) in fanData" :key="index">
                      {{ item.AName }}{{ item.Phone }}{{ item.PName
                      }}{{ item.CName }}{{ item.TName }}{{ item.Remark }}
                    </p>
                  </td>
                </tr>
                <tr>
                  <td>商品名称：</td>
                  <td>
                    <p v-for="(item, index) in aa.shopdata" :key="index">
                      <img :src="item.GImg" width="20px" height="20px" />{{
                        item.GName
                      }}
                    </p>
                  </td>
                </tr>
                <tr>
                  <td>发票信息：</td>
                  <td>电子发票 个人</td>
                </tr>
              </table>
            </el-collapse-item>
          </el-collapse>
        </p>
      </div>
    </div>
    <div class="moneyxia">
      <p class="moneywen">选择以下支付方式付款</p>
      <div class="moneyping">
        <p>支付平台</p>
        <div class="moneyzhi" @click="zhi">
          <img
            src="http://localhost:20338/StaticFiles/支付宝.png"
            width="150px"
            height="50px"
          />
        </div>
        <div class="moneywei" @click="wei">
          <img
            src="http://localhost:20338/StaticFiles/微信.png"
            width="150px"
            height="50px"
          />
        </div>
      </div>
    </div>
    <el-dialog
      title=""
      :visible.sync="dialogVisible"
      width="40%"
      :before-close="handleClose"
      style="background-color: #ccc"
    >
      <div class="moneywei1">
        <img
          src="http://localhost:20338/StaticFiles/微信1.png"
          width="300px"
          height="500px"
        />
      </div>
      <div class="moneywei3"><h4>微信支付</h4></div>
      <div class="moneywei2">
        <img
          src="http://localhost:20338/StaticFiles/微信2.png"
          width="200px"
          height="200px"
        />
      </div>
    </el-dialog>

    <el-dialog
      title="支付确认"
      :visible.sync="dialogVisibles"
      width="50%"
      :before-close="handleCloses"
      style="background-color: #ccc"
    >
    <p>您确认是否完成支付</p>
    <el-button type="warning" @click="cha">查看订单</el-button>
    <el-button type="info" @click="dialogVisibles=false">未支付</el-button>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeNames: ["1"],
      aa: {
        hao:"",
        item: 0,
        zong: "",
        shopdata: [],
      },
      fanData: [],
      zong: "",
      dialogVisible: false,
      dialogVisibles: false,
    };
  },
  methods: {
    handleChange(val) {
      console.log(val);
    },
    zhi() {
      this.$router.push("/zhi");
    },
    wei() {
      this.dialogVisible = true;
    },
    handleClose() {
     this.dialogVisibles=true
    },
    handleCloses(done) {
      this.$confirm("确认关闭？")
        .then(() => {
          done();
        })
        .catch(() => {});
    },
    fan() {
      this.$axios
        .get("http://localhost:20338/api/Orders/Check?id=" + this.aa.item)
        .then((res) => {
          this.fanData = res.data;
        });
    },
    cha(){-
      this.$router.push('/order');
    }
  },
  created() {
    this.aa = this.$route.query;
    this.zong = this.aa.zong;
    this.fan();
    console.log(this.fanData);
  },
};
</script>

<style scoped>
.moneyzong {
  width: 100%;
  height: 100%;
  background-color: #ccc;
}

.moneyshang {
  width: 1000px;
  height: 150px;
  margin: auto;
  background-color: #fff;
  padding: 30px 40px 30px 40px;
  margin-bottom: 30px;
}
.moneyxia {
  width: 1000px;
  height: 180px;
  margin: auto;
  background-color: #fff;
  padding: 30px 40px 30px 40px;
  text-align: left;
}
.moneyzuo {
  width: 600px;
  height: 180px;
  float: left;
}
.moneyyou {
  width: 380px;
  height: 300px;
  margin-left: 620px;
  text-align: left;
}
.moneyp {
  margin-left: 180px;
  text-align: left;
}
.moneytu {
  width: 130px;
  height: 130px;
  float: left;
}
.moneywen {
  text-align: left;
}
.moneyping {
  width: 800px;
  height: 120px;
}
.moneyzhi {
  width: 150px;
  height: 50px;
  border: 1px solid #ccc;
  text-align: left;
}
.moneywei {
  width: 150px;
  height: 50px;
  border: 1px solid #ccc;
  margin-left: 180px;
  margin-top: -52px;
}
.moneywei1 {
  width: 300px;
  height: 500px;
}
.moneywei2 {
  width: 400px;
  height: 400px;
  margin-left: 320px;
}
.moneywei3 {
  width: 400px;
  height: 50px;
  margin-left: 320px;
  margin-top: -460px;
  text-align: left;
}
</style>